﻿<%@ Page Title="Página principal" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
	CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
	<div class="container" style="height: 350px">
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
			<!-- Indicators -->
			<ol class="carousel-indicators">
				<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
				<li data-target="#carousel-example-generic" data-slide-to="1"></li>
				<li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>
			<!-- Wrapper for slides -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="http://www.cedeira.com.ar/Imagenes/eFact-R.jpg" alt="..." class="img-responsive center-block" />
					<div class="carousel-caption">
						<h3>
							chasingarrows</h3>
						<p>
							1</p>
					</div>
				</div>
				<div class="item">
					<img src="http://www.cedeira.com.ar/Imagenes/CedFCI-EsquemaProceso.jpg" alt="..."
						class="img-responsive center-block" />
					<div class="carousel-caption">
						<h3>
							chasingarrows</h3>
						<p>
							2</p>
					</div>
				</div>
				<div class="item">
					<img src="http://www.cedeira.com.ar/Imagenes/CedST-EsquemaMEP.jpg" alt="..." class="img-responsive center-block" />
					<div class="carousel-caption">
						<h3>
							chasingarrows</h3>
						<p>
							3</p>
					</div>
				</div>
			</div>
			<!-- Controls -->
			<a class="left  carousel-control" href="#carousel-example-generic" role="button"
				data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
			<a class="right carousel-control" href="#carousel-example-generic" role="button"
				data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">
					Welcome to Modern Business
				</h1>
			</div>
			<div class="col-xs-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4>
							<i class="fa fa-fw fa-check"></i>Bootstrap v3.2.0</h4>
					</div>
					<div class="panel-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis
							quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda
							voluptatibus eveniet incidunt dicta nostrum quod?</p>
						<a href="#" class="btn btn-default">Learn More</a>
					</div>
				</div>
			</div>
			<div class="col-xs-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4>
							<i class="fa fa-fw fa-gift"></i>Free &amp; Open Source</h4>
					</div>
					<div class="panel-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis
							quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda
							voluptatibus eveniet incidunt dicta nostrum quod?</p>
						<a href="#" class="btn btn-default">Learn More</a>
					</div>
				</div>
			</div>
			<div class="col-xs-4">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4>
							<i class="fa fa-fw fa-compass"></i>Easy to Use</h4>
					</div>
					<div class="panel-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis
							quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda
							voluptatibus eveniet incidunt dicta nostrum quod?</p>
						<a href="#" class="btn btn-default">Learn More</a>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4>
							<i class="fa fa-fw fa-compass"></i>Easy to Use</h4>
					</div>
					<div class="panel-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis
							quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda
							voluptatibus eveniet incidunt dicta nostrum quod?</p>
						<a href="#" class="btn btn-default">Learn More</a>
					</div>
				</div>
			</div>
			<div class="col-xs-6">
				<img src="http://www.cedeira.com.ar/Imagenes/CedFCI-EsquemaProceso.jpg" alt="..."
					class="img-responsive" />
			</div>
			<div class="col-xs-3">
				<div class="panel panel-default">
					<div class="panel-heading">
						<h4>
							<i class="fa fa-fw fa-compass"></i>Easy to Use</h4>
					</div>
					<div class="panel-body">
						<p>
							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis
							quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda
							voluptatibus eveniet incidunt dicta nostrum quod?</p>
						<a href="#" class="btn btn-default">Learn More</a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<!-- Main component for a primary marketing message or call to action -->
		<div class="jumbotron">
			<h1>
				Navbar example</h1>
			<p>
				This example is a quick exercise to illustrate how the default, static and fixed
				to top navbar work. It includes the responsive CSS and HTML, so it also adapts to
				your viewport and device.</p>
			<p>
				To see the difference between static and fixed top navbars, just scroll.</p>
			<p>
				<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View
					navbar docs &raquo;</a>
			</p>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<h2 class="page-header">
				Services Panels</h2>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="panel panel-default text-center">
				<div class="panel-heading">
					<span class="fa-stack fa-5x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-tree fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="panel-body">
					<h4>
						Service One</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					<a href="#" class="btn btn-primary">Learn More</a>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="panel panel-default text-center">
				<div class="panel-heading">
					<span class="fa-stack fa-5x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-car fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="panel-body">
					<h4>
						Service Two</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					<a href="#" class="btn btn-primary">Learn More</a>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="panel panel-default text-center">
				<div class="panel-heading">
					<span class="fa-stack fa-5x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-support fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="panel-body">
					<h4>
						Service Three</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					<a href="#" class="btn btn-primary">Learn More</a>
				</div>
			</div>
		</div>
		<div class="col-md-3 col-sm-6">
			<div class="panel panel-default text-center">
				<div class="panel-heading">
					<span class="fa-stack fa-5x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-database fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="panel-body">
					<h4>
						Service Four</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
					<a href="#" class="btn btn-primary">Learn More</a>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<h2 class="page-header">
				Service Tabs</h2>
		</div>
		<div class="col-lg-12">
			<ul id="myTab" class="nav nav-tabs nav-justified" role="tablist">
				<li class="active"><a href="#service-one" data-toggle="tab" role="tab"><i class="fa fa-tree">
				</i>Service One</a> </li>
				<li class=""><a href="#service-two" data-toggle="tab" role="tab"><i class="fa fa-car">
				</i>Service Two</a> </li>
				<li class=""><a href="#service-three" data-toggle="tab" role="tab"><i class="fa fa-support">
				</i>Service Three</a> </li>
				<li class=""><a href="#service-four" data-toggle="tab" role="tab"><i class="fa fa-database">
				</i>Service Four</a> </li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active" id="service-one">
					<h4>
						Service One</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat
						illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem.
						Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem
						ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum,
						nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem
						neque velit in. At quia quaerat asperiores.</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat
						illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem.
						Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem
						ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum,
						nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem
						neque velit in. At quia quaerat asperiores.</p>
				</div>
				<div class="tab-pane fade" id="service-two">
					<h4>
						Service Two</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat
						illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem.
						Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem
						ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum,
						nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem
						neque velit in. At quia quaerat asperiores.</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat
						illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem.
						Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem
						ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum,
						nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem
						neque velit in. At quia quaerat asperiores.</p>
				</div>
				<div class="tab-pane fade" id="service-three">
					<h4>
						Service Three</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat
						illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem.
						Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem
						ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum,
						nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem
						neque velit in. At quia quaerat asperiores.</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat
						illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem.
						Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem
						ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum,
						nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem
						neque velit in. At quia quaerat asperiores.</p>
				</div>
				<div class="tab-pane fade" id="service-four">
					<h4>
						Service Four</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat
						illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem.
						Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem
						ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum,
						nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem
						neque velit in. At quia quaerat asperiores.</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae repudiandae fugiat
						illo cupiditate excepturi esse officiis consectetur, laudantium qui voluptatem.
						Ad necessitatibus velit, accusantium expedita debitis impedit rerum totam id. Lorem
						ipsum dolor sit amet, consectetur adipisicing elit. Natus quibusdam recusandae illum,
						nesciunt, architecto, saepe facere, voluptas eum incidunt dolores magni itaque autem
						neque velit in. At quia quaerat asperiores.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-12">
			<h2 class="page-header">
				Service List</h2>
		</div>
		<div class="col-md-4">
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-tree fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service One</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-car fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service Two</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-support fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service Three</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-database fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service Four</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-bomb fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service Five</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-bank fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service Six</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
		</div>
		<div class="col-md-4">
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-paper-plane fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service Seven</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-space-shuttle fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service Eight</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
			<div class="media">
				<div class="pull-left">
					<span class="fa-stack fa-2x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i
						class="fa fa-recycle fa-stack-1x fa-inverse"></i></span>
				</div>
				<div class="media-body">
					<h4 class="media-heading">
						Service Nine</h4>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo itaque ipsum sit
						harum.</p>
				</div>
			</div>
		</div>
	</div>
	<div class="container text-center">
		<div class="panel panel-heading panel-default">
			Header del panel
		</div>
		<div class="panel panel-body panel-default">
			<div class="btn-group">
				<div id="button" data-role="button" class="btn btn-primary btn-lg">
					Llamar a webservices</div>
				<div id="borrarButton" data-role="button" class="btn btn-primary btn-lg">
					Borrar Campos</div>
				<div id="proggifon" data-role="button" class="btn btn-primary btn-lg">
					Mostrar GIF</div>
				<div id="proggifoff" data-role="button" class="btn btn-primary btn-lg">
					Ocultar GIF</div>
			</div>
		</div>
		<div class="panel-footer hidden">
			<i class="fa fa-spinner fa-spin fa-5x"></i><i class="fa fa-circle-o-notch fa-spin">
			</i><i class="fa fa-refresh fa-spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-check-square-o">
			</i>
		</div>
	</div>
	<div class="container text-center">
		<div id="progreso" hidden>
			<img src="Imagenes/chasingarrows.gif" alt="nada" />
		</div>
		<div class="row">
			<div class="col-xs-6">
				Example A</div>
			<div id="searchresultsA" class="col-xs-6">
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				Example B</div>
			<div class="col-xs-6" id="searchresultsB">
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				Example C</div>
			<div class="col-xs-6" id="searchresultsC">
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				Example D</div>
			<div class="col-xs-6" id="searchresultsD">
			</div>
		</div>
		<div class="row">
			<div class="col-xs-6">
				Example E</div>
			<div class="col-xs-6" id="searchresultsE">
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<ul class="timeline">
			<li>
				<div class="timeline-badge info">
					<i class="glyphicon glyphicon-hand-left"></i>
				</div>
				<div class="timeline-panel">
					<div class="timeline-heading">
						<h2 class="timeline-title">
							Shake Button</h2>
						<p>
							<small class="text-muted">Click to make it say no</small></p>
					</div>
					<div class="timeline-body">
						<h3>
						</h3>
						<button class="btn btn-primary btn-lg" id="shaker">
							Click Me</button>
					</div>
				</div>
			</li>
			<li class="timeline-inverted">
				<div class="timeline-badge warning">
					<i class="glyphicon glyphicon-calendar"></i>
				</div>
				<div class="timeline-panel">
					<div class="timeline-heading">
						<h2 class="timeline-title">
							Loading Button</h2>
						<p>
							<small class="text-muted">Add state to your buttons</small></p>
					</div>
					<div class="timeline-body">
						<h3>
						</h3>
						<button type="button" id="loadingBtn" data-loading-text="Loading..." class="btn btn-lg btn-primary">
							Click Me
						</button>
					</div>
				</div>
			</li>
			<li class="timeline-inverted">
				<div class="timeline-badge">
					<i class="glyphicon glyphicon-time"></i>
				</div>
				<div class="timeline-panel">
					<div class="timeline-heading">
						<h2 class="timeline-title">
							Progress Bar</h2>
						<p>
							<small class="text-muted">A working jQuery example</small></p>
					</div>
					<div class="timeline-body">
						<h3>
						</h3>
						<div class="progress progress-striped">
							<div class="progress-bar bar" style="width: 0%;">
							</div>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="timeline-badge success">
					<i class="glyphicon glyphicon-hand-up"></i>
				</div>
				<div class="timeline-panel">
					<div class="timeline-heading">
						<h2 class="timeline-title">
							Switch Button</h2>
						<p>
							<small class="text-muted">Toggle off and on state</small></p>
					</div>
					<div class="timeline-body">
						<h3>
						</h3>
						<div class="btn-group btn-toggle">
							<button class="btn btn-lg btn-default">
								ON</button>
							<button class="btn btn-lg btn-primary active">
								OFF</button>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<div class="row" id="contact">
		<!-- Map Column -->
		<div class="col-md-8">
			<!-- Embedded Google Map -->
			<iframe width="100%" height="400px" style="margin: 0; border: 0" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3283.9456273047763!2d-58.372745799999954!3d-34.605536399999984!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bccad2a2b5fd13%3A0xd53bb7a8f0163869!2sTte.+General+Juan+Domingo+Per%C3%B3n+430%2C+Buenos+Aires%2C+Ciudad+Aut%C3%B3noma+de+Buenos+Aires!5e0!3m2!1ses!2sar!4v1412019534737">
			</iframe>
		</div>
		<!-- Contact Details Column -->
		<div class="col-md-4">
			<h3>
				Contact Details</h3>
			<p>
				3481 Melrose Place<br />
				Beverly Hills, CA 90210<br />
			</p>
			<p>
				<i class="fa fa-phone"></i>
				<abbr title="Phone">
					P</abbr>: (123) 456-7890</p>
			<p>
				<i class="fa fa-envelope-o"></i>
				<abbr title="Email">
					E</abbr>: <a href="mailto:name@example.com">name@example.com</a>
			</p>
			<p>
				<i class="fa fa-clock-o"></i>
				<abbr title="Hours">
					H</abbr>: Monday - Friday: 9:00 AM to 5:00 PM</p>
			<ul class="list-unstyled list-inline list-social-icons">
				<li><a href="#"><i class="fa fa-facebook-square fa-2x"></i></a></li>
				<li><a href="#"><i class="fa fa-linkedin-square fa-2x"></i></a></li>
				<li><a href="#"><i class="fa fa-twitter-square fa-2x"></i></a></li>
				<li><a href="#"><i class="fa fa-google-plus-square fa-2x"></i></a></li>
			</ul>
		</div>
	</div>
</asp:Content>
<asp:Content ID="ScriptDefault" runat="server" ContentPlaceHolderID="ScriptContent">
	<script type="text/javascript">
		$(document).ready(
		function () { }
		);
		$(document).ajaxStart(function () {
			$("#progreso").show();
			$("#searchresultsE").text("");
		});
		$(document).ajaxComplete(function () {
			$("#progreso").hide();
		});
	</script>
	<script type="text/javascript">

		$("#button").click(function () {

			// SayHello returns a string we want to display.  Examples A, B and C show how you get the data in native
			// format (xml wrapped) as well as in JSON format.  Also how to send the parameters in form-encoded format,
			// JSON format and also JSON objects.  To get JSON back you need to send the params in JSON format.

			// Example A - call a function that returns a string.
			// Params are sent as form-encoded, data that comes back is text
			//			$.ajax({
			//				type: "POST",
			//				url: "MyWebService.asmx/SayHello",
			//				data: "firstName=Aidy&lastName=F", // the data in form-encoded format, ie as it would appear on a querystring
			//				dataType: "text", // the data type we want back, so text.  The data will come wrapped in xml
			//				success: function (data) { $("#searchresultsA").html(data); }
			//			});

			// Example B - call a function that returns a string.
			// Params are sent in JSON format, data that comes back is JSON
			//			$.ajax({
			//				type: "POST",
			//				url: "MyWebService.asmx/SayHello",
			//				data: "{firstName:'Aidy', lastName:'F'}", // the data in JSON format.  Note it is *not* a JSON object, is is a literal string in JSON format
			//				contentType: "application/json; charset=utf-8", // we are sending in JSON format so we need to specify this
			//				dataType: "json", // the data type we want back.  The data will come back in JSON format
			//				success: function (data) {
			//					$("#searchresultsB").html(data.d); // it's a quirk, but the JSON data comes back in a property called "d"; {"d":"Hello Aidy F"}
			//				}
			//			});

			// Example C - call a function that returns a string.
			// Params are sent as a JSON object, data that comes back is text
			//			$.ajax({
			//				type: "POST",
			//				url: "MyWebService.asmx/SayHello",
			//				data: { firstName: 'Aidy', lastName: 'F' }, // here we are specifing the data as a JSON object, not a string in JSON format
			//				// this will be converted into a form encoded format by jQuery
			//				// even though data is a JSON object, jQuery will convert it to "firstName=Aidy&lastName=F" so it *is* form encoded
			//				contentType: "application/x-www-form-urlencoded; charset=UTF-8",
			//				dataType: "text", // the data type we want back, so text.  The data will come wrapped in xml
			//				success: function (data) {
			//					$("#searchresultsC").html(data); // show the data inside the xml wrapper
			//				}
			//			});

			// SayHelloJson returns a .net object that has been converted into JSON format.  So the method still return a
			// string, but that string is an object in JSON format.  It is basically an object within an object.  We still
			// get the "d" property back as in Example B, but "d" is an object represented in JSON format itself.

			// Example D - call a function that returns a string that is an object in JSON format.
			// Params are sent in JSON format, data that comes back is a string that represents an object in JSON format
			//			$.ajax({
			//				type: "POST",
			//				url: "MyWebService.asmx/SayHelloJson",
			//				data: "{ firstName: 'Aidy', lastName: 'F' }",
			//				contentType: "application/json; charset=utf-8",
			//				dataType: "json",
			//				success: function (data) {
			//					var myData = JSON.parse(data.d); // data.d is a JSON formatted string, to turn it into a JSON object
			//					// we use JSON.parse
			//					// now that myData is a JSON object we can access its properties like normal
			//					$("#searchresultsD").html(myData.Greeting + " " + myData.Name);
			//				}
			//			});

			// SayHelloObject returns a typed .net object.  The difference between this and Example D is that in Example D
			// the "d" property is an object in JSON format so we need to parse it to make it a JSON object.  Here the
			// "d" property is already an actual JSON object so no need to parse it.

			// Example E - call a function that returns an object.  .net will serialise the object as JSON for us.
			// Params are sent in JSON format, data that comes back is a JSON object
			$.ajax({
				type: "POST",
				url: "MyWebService.asmx/SayHelloObject",
				data: "{ firstName: 'Aidy', lastName: 'F' }",
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function (data) {
					var myData = data.d; // data.d is a JSON object that represents out SayHello class.
					// As it is already a JSON object we can just start using it
					$("#searchresultsE").html(myData.Greeting + " " + myData.Name);
				}
			});
		});
	</script>
	<script type="text/javascript">
		$("#borrarButton").click(function () {
			$("#searchresultsA").text("");
			$("#searchresultsB").text("");
			$("#searchresultsC").text("");
			$("#searchresultsD").text("");
			$("#searchresultsE").text("");
			$("#progreso").hide();
		});
		$("#proggifoff").click(function () {
			$("#progreso").hide();
		});
		$("#proggifon").click(function () {
			$("#progreso").show();
		});
	</script>
</asp:Content>